<template>
  <div class="base-q">
    <div class="title">基本信息</div>
    <p class="alert">*请如实填写个人信息，以确保奖品准确发放</p>
    <div class="list">
      <div class="q">姓名</div>
      <div class="a-w">
        <mt-field
          v-model="info.username"
          label
          placeholder="请输入名称"
          style="border: 1px solid #ccc;margin-top: 10px"
        ></mt-field>
      </div>
    </div>
    <div class="list">
      <div class="q">手机号</div>
      <div class="a-w">
        <mt-field
          v-model="info.phone"
          label
          placeholder="请输入手机号"
          style="border: 1px solid #ccc;margin-top: 10px"
        ></mt-field>
      </div>
    </div>
    <div class="list" v-if="$route.params.type=='jeBQe9XH'">
      <div class="q">所在区</div>
      <div class="a-w">
        <mt-field
          v-model="info.area"
          label
          placeholder="请输入所在区"
          style="border: 1px solid #ccc;margin-top: 10px"
        ></mt-field>
      </div>
    </div>
    <div class="list" v-if="$route.params.type=='jeBQe9XH'">
      <div class="q">所在块</div>
      <div class="a-w">
        <mt-field
          v-model="info.piece"
          label
          placeholder="请输入所在块"
          style="border: 1px solid #ccc;margin-top: 10px"
        ></mt-field>
      </div>
    </div>
    <div class="title">一、判断题</div>
    <div class="j-q">
      <p>1、对重症患者进行营养支持治疗。强化蛋白质供给和使用富含欧米伽3脂肪酸的营养制剂列为主要的营养治疗手段</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_1==1}" @click="info.j_1=1">正确</div>
        <div class="btn n" :class="{'active':info.j_1==2}" @click="info.j_1=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>2、营养支持不能提高机体抵抗力，不能达到改善疾病的防治的效果，对减少并发症的发生，加速患者的康复，没有在发表的各项文献之中得到证实。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_2==1}" @click="info.j_2=1">正确</div>
        <div class="btn n" :class="{'active':info.j_2==2}" @click="info.j_2=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>3、炎症风暴它仅仅影响到我们的呼吸系统，不会影响到我们的心血管系统，更不可能影响到泌尿生殖系统，所以它的影响只是局部的。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_3==1}" @click="info.j_3=1">正确</div>
        <div class="btn n" :class="{'active':info.j_3==2}" @click="info.j_3=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>4、世上最有效的药物是人的免疫力。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_4==1}" @click="info.j_4=1">正确</div>
        <div class="btn n" :class="{'active':info.j_4==2}" @click="info.j_4=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>5、炎症风暴，即细胞因子风暴是由感染、药物或某些疾病引起的免疫系统过度激活引发的。在这次疫情中，细胞因子风暴是引起许多患者死亡的重要原因</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_5==1}" @click="info.j_5=1">正确</div>
        <div class="btn n" :class="{'active':info.j_5==2}" @click="info.j_5=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>6、鱼油类欧米伽3可以转化成一系列有趣的被称为特异性促炎症消退介质的分子，这些来自DHA和EPA的分子在保护人体免于炎症和感染的影响方面十分有效。欧米伽3就是鱼油。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_6==1}" @click="info.j_6=1">正确</div>
        <div class="btn n" :class="{'active':info.j_6==2}" @click="info.j_6=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>7、宋采教授说：如果已经有焦虑、紧张或者特别有抑郁症，或者已经患有一些炎症，免疫炎症疾病的人，我们也可以适当的加大欧米伽3的保健品的服用。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_7==1}" @click="info.j_7=1">正确</div>
        <div class="btn n" :class="{'active':info.j_7==2}" @click="info.j_7=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>8、余金明教授讲次新冠肺炎，除了临床上推荐的这些重大的举措，我认为有效的营养干预其实也是非常重要的，因此无论是感染新冠病毒者还是心脑血管有问题的人，甚至是正常的其他的人群，在这个期间，有效的补充欧米伽3其实还是非常必要的。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_8==1}" @click="info.j_8=1">正确</div>
        <div class="btn n" :class="{'active':info.j_8==2}" @click="info.j_8=2">错误</div>
      </div>
    </div>
    <div class="j-q">
      <p>9、赵锋教授的报告里面提到：小朋友在出生之后，对EPA的需求量要超过了DHA</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_9==1}" @click="info.j_9=1">正确</div>
        <div class="btn n" :class="{'active':info.j_9==2}" @click="info.j_9=2">错误</div>
      </div>
    </div>
      <div class="j-q">
      <p>10、为了保持两种脂肪在体内的平衡，我们需要通过吃植物油来增加饮食中的欧米伽3脂肪的含量，如玉米油、大豆油、葵花籽油或花生油。</p>
      <div class="a-b flex_h">
        <div class="btn y" :class="{'active':info.j_10==1}" @click="info.j_10=1">正确</div>
        <div class="btn n" :class="{'active':info.j_10==2}" @click="info.j_10=2">错误</div>
      </div>
    </div>
    <div class="title">三 、思考题</div>
    <div class="s-q">
      <p>
        一场突如其来的新冠肺炎在武汉爆发，但在政府领导下全国上下万众一心、众志成城，
        我们终于取得了战疫的胜利。但是全球100多个国家相继发生疫情，有些国家严重程度远超我国，
        中国反而成了世界最安全的洼地。上百万中国留学生、甚至有钱的外国人纷纷到中国避险，
        这给我国人民带来巨大的风险。大家知道，新冠肺炎没有特效药，疫苗至少得1年以后。
        而且，有基础疾病的人一旦染上致死率极高。据世界卫生组织统计，没有基础疾病的人致死率0.9%，
        而癌症患者染上致死率超过10%，是没有基础疾病人群的10倍！（有高血压的6%，有糖尿病的7%）。
        新冠肆虐时期，我们只能通过营养、运动方式来提高自身免疫力应对。这里请思考：
      </p>
      <div class="s-q">
        <p>1、你过去是如何调整营养摄入的？请叙述你的经验。</p>
        <div class="s-q-a">
          <mt-field placeholder="请输入您的答案" type="textarea" rows="4" v-model="info.s_1"></mt-field>
        </div>
      </div>
      <div>
        <Upload v-model="image" @updateImage="updateImage"></Upload>
      </div>
    </div>

    <div class="submit-btn">
      <mt-button type="primary" class="btn" @click="submit">提交</mt-button>
    </div>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import { mapActions } from "vuex";
import { postQa } from "../../api/question";
import Upload from "./upload";
import Cookies from "js-cookie";
import { Toast } from "mint-ui";
import { deepCopyObj, checkZhName, checkPhone, checkCode } from "common/utils";

export default {
  mixins: [wxshare],
  components: { Upload },
  data() {
    return {
      value: "",
      image: [],
      info: {
        username: "",
        phone: "",
        area: "",
        j_1: "",
        j_2: "",
        j_3: "",
        j_4: "",
        j_5: "",
        j_6: "",
        j_7: "",
        j_8: "",
        j_9: "",
        j_10:''
      }
    };
  },
  watch: {
    info: {
      handler(newValue, oldValue) {
        Cookies.set("info", newValue);
      },
      deep: true
    }
  },
  methods: {
    submit() {
      if (!checkZhName(this.info["username"])) {
        Toast("姓名只能是2-4位的中文字符！");
        return false;
      }
      if (!checkPhone(this.info["phone"])) {
        Toast("请先填写正确的手机号！");
        return false;
      }
      if (this.$route.params.type == "jeBQe9XH") {
        if (!this.info["area"]) {
          Toast("请输入所在区！");
          return false;
        }
        if (!this.info["piece"]) {
          Toast("请输入所在块！");
          return false;
        }
      }
      let info = this.info;
      let channelNameJson = {
        jeBQe9XH: "上海",
        Kq6vWnQb: "广州",
        vTScdFuV: "温州",
        wkITWbbL: "天津"
      };
      info.s_1_p = this.image;
      postQa({
        username: info.username,
        phone: info.phone,
        area: info.area, //区
        piece: info.piece, //块
        channelName: channelNameJson[this.$route.params.type],
        content: JSON.stringify(info)
      }).then(res => {
        Cookies.remove("info");
        this.$router.push("/qasuccess");
      });
    },
    updateImage(imgs) {
      this.image = imgs;
    }
  },
  mounted() {},
  created() {
    let info = Cookies.get("info");
    if (info) {
      this.info = JSON.parse(info) || {};
    }
  }
};
</script>
<style lang="less">
.base-q {
  background: #f7f5f4;
  .title {
    padding: 1rem;
  }
  .alert {
    padding: 0.5rem;
    font-size: 12px;
    color: red;
  }
  .list,
  .text-q,
  .s-q,
  .j-q {
    background: #ffffff;
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 0.4rem;
  }
  .text-q input {
    font-size: 1rem;
    border-bottom: 1px solid #9b9b9b;
    color: #fe8106;
    outline: none;
  }
  .flex_h {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .justify_between {
    justify-content: space-between;
  }
  .a-b {
    margin: 1rem;
  }
  .btn {
    padding: 0.2rem 1.5rem;
    border: 1px solid #9b9b9b;
    border-radius: 1rem;
  }
  .active {
    background: #fe8106;
    color: #ffffff;
    border: 1px solid #fe8106;
  }
  .s-q {
  }
  .s-q-a {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .submit-btn {
    margin-bottom: 1rem;
    padding: 1rem;
    .btn {
      width: 100%;
    }
  }
}
</style>